﻿<div id="app">
    <!-- 顶部基础信息区域 -->
    <div class="basic-info" v-if="!loading">
        <!-- 标题与操作按钮 -->
        <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px;">
            <div>
                <h2 class="page-title">{{ form.goodsName }}</h2>
                <p style="color: #909399; margin-left: 14px;">货品编码: {{ form.goodsCode }}</p>
            </div>
            <div class="action-buttons">
                <el-button v-on:click="handleEdit" type="primary">编辑</el-button>
                <el-button v-on:click="handleDelete" type="danger">删除</el-button>
                <el-button v-on:click="handleToggleStatus" :type="form.status === '0' ? 'warning' : 'success'">
                    {{ form.status === '0' ? '停用' : '启用' }}
                </el-button>
                <el-button v-on:click="printDialogVisible = true">打印</el-button>
                <el-dropdown>
                    <el-button>更多</el-button>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item v-on:click="handleCopy">复制货品</el-dropdown-item>
                            <el-dropdown-item v-on:click="handleExport">导出信息</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
                <!-- 通用按钮：始终显示 -->
                <el-button onclick="window.history.back()">关闭页面</el-button>
            </div>
        </div>

        <!-- 图片轮播 + 信息区域 -->
        <div class="info-container">
            <!-- 图片轮播 -->
            <div class="carousel-container">
                <el-carousel height="200px" v-if="imgs && imgs.length > 0">
                    <el-carousel-item v-for="(img, index) in imgs" :key="index">
                        <img :src="img" style="width: 100%; height: 100%; object-fit: cover;" />
                    </el-carousel-item>
                </el-carousel>
                <div v-else style="height: 200px; display: flex; align-items: center; justify-content: center; background-color: #f5f7fa; color: #909399; border-radius: var(--border-radius);">
                    <div style="text-align: center;">
                        <div style="font-size: 48px; margin-bottom: 10px;">📷</div>
                        <span>暂无图片</span>
                    </div>
                </div>
            </div>

            <!-- 右侧信息 -->
            <div style="flex: 1;">
                <!-- 价格提示栏 -->
                <div class="price-bar">
                    <span>入库参考价: <span style="color: var(--danger-color); font-weight: bold;">¥{{ form.purchaseReferencePrice || '0.00' }}</span></span>
                    <span>出库参考价: <span style="color: var(--danger-color); font-weight: bold;">¥{{ form.salesReferencePrice || '0.00' }}</span></span>
                </div>

                <!-- 基础信息表单（只读） -->
                <el-form label-width="120px">
                    <div class="form-row">
                        <div class="form-col">
                            <el-form-item label="货品编码">
                                <el-input v-model="form.goodsCode" disabled />
                            </el-form-item>
                        </div>
                        <div class="form-col">
                            <el-form-item label="货品名称">
                                <el-input v-model="form.goodsName" disabled />
                            </el-form-item>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-col">
                            <el-form-item label="货品类型">
                                <el-input v-model="form.goodsTypeName" disabled />
                            </el-form-item>
                        </div>
                        <div class="form-col">
                            <el-form-item label="规格型号">
                                <el-input v-model="form.specification" disabled />
                            </el-form-item>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-col">
                            <el-form-item label="供应商">
                                <el-input v-model="form.supplierName" disabled />
                            </el-form-item>
                        </div>
                        <div class="form-col">
                            <el-form-item label="客户名称">
                                <el-input v-model="form.customerName" disabled />
                            </el-form-item>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-col">
                            <el-form-item label="保质期管理">
                                <el-switch v-model="shelfLifeManage" disabled />
                            </el-form-item>
                        </div>
                        <div class="form-col">
                            <el-form-item label="保质期">
                                <div style="display: flex; align-items: center;">
                                    <el-input v-model="form.shelfLife" disabled style="width: 100px; margin-right: 5px;" />
                                    <el-input v-model="shelfLifeUnit" disabled style="width: 80px;" />
                                </div>
                            </el-form-item>
                        </div>
                        <div class="form-col">
                            <el-form-item label="预警天数">
                                <el-input v-model="form.warningDays" disabled />
                            </el-form-item>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-col">
                            <el-form-item label="状态">
                                <el-tag :type="form.status === '0' ? 'success' : 'danger'">
                                    {{ form.status === '0' ? '正常' : '停用' }}
                                </el-tag>
                            </el-form-item>
                        </div>
                        <div class="form-col">
                            <el-form-item label="排序">
                                <el-input v-model="form.displayOrder" disabled />
                            </el-form-item>
                        </div>
                    </div>
                    <div class="form-row full-width">
                        <el-form-item label="备注">
                            <el-input v-model="form.remarks" disabled type="textarea" :rows="2" />
                        </el-form-item>
                    </div>
                </el-form>

                <!-- 创建/更新信息 -->
                <div class="meta-info">
                    <span>创建人: {{ form.createBy || '未知' }} &nbsp;&nbsp; 创建时间: {{ formatDate(form.createTime) }}</span>
                    <span>更新人: {{ form.updateBy || '未知' }} &nbsp;&nbsp; 更新时间: {{ formatDate(form.updateTime) }}</span>
                </div>
            </div>
        </div>

        <!-- 总库存/总金额 -->
        <div style="display: flex; justify-content: center; margin-top: 30px; flex-wrap: wrap; gap: 15px;">
            <div class="stats-card">
                <div class="stats-value">{{ totalStock || 0 }}</div>
                <div>总库存</div>
            </div>
            <div class="stats-card">
                <div class="stats-value">¥{{ totalAmount || '0.00' }}</div>
                <div>库存总金额</div>
            </div>
            <div class="stats-card">
                <div class="stats-value">{{ form.stockMin || 0 }}</div>
                <div>最低库存</div>
            </div>
            <div class="stats-card">
                <div class="stats-value">{{ form.stockMax || 0 }}</div>
                <div>最高库存</div>
            </div>
        </div>
    </div>

    <!-- 加载状态 -->
    <div class="loading-container" v-if="loading">
        <div class="loading-spinner"></div>
        <span style="color: var(--info-color);">加载中...</span>
    </div>

    <!-- 标签页区域 -->
    <div class="tabs-container" v-if="!loading">
        <el-tabs v-model="activeTab">
            <!-- 其他信息 -->
            <el-tab-pane label="其他信息" name="other">
                <div style="margin-top: 20px;">
                    <h4 style="margin-bottom: 15px; color: #1f2d3d;">附件</h4>

                    <!-- 上传区域 -->
                    <div class="upload-area">
                        <el-upload class="upload-demo"
                                   action="https://jsonplaceholder.typicode.com/posts/"
                                   v-on:success="handleUploadSuccess"
                                   v-on:error="handleUploadError"
                                   :file-list="fileList"
                                   :auto-upload="true"
                                   :show-file-list="false"
                                   accept=".doc,.docx,.pdf,.rar,.zip"
                                   :limit="10"
                                   v-on:exceed="handleExceed">
                            <el-button type="primary" size="small">点击上传</el-button>
                            <div style="margin-top: 10px; color: var(--info-color);">
                                或将文件拖到此处
                            </div>
                        </el-upload>
                    </div>

                    <p style="margin: 10px 0; color: var(--info-color); font-size: 13px;">支持格式：doc、docx、pdf、rar、zip，单文件最大200MB</p>

                    <!-- 已上传附件列表 -->
                    <div class="attachments-list">
                        <div v-for="(file, index) in uploadedFiles"
                             :key="index"
                             class="file-item"
                             :class="{ 'bg-light': hoverIndex === index }"
                             v-on:mouseenter="hoverIndex = index"
                             v-on:mouseleave="hoverIndex = -1"
                             style="display: flex; align-items: center; margin: 8px 0; border-radius: 4px; cursor: pointer;">
                            <span style="margin-right: 12px; font-size: 18px;">📄</span>
                            <span style="flex: 1;">{{ file.name }}</span>
                            <el-button size="small" type="text" style="color: var(--danger-color);" v-on:click="removeFile(index)">删除</el-button>
                        </div>
                    </div>
                </div>
            </el-tab-pane>

            <!-- 其他标签页 -->
            <el-tab-pane label="入库记录" name="in">入库记录内容</el-tab-pane>
            <el-tab-pane label="出库记录" name="out">出库记录内容</el-tab-pane>
            <el-tab-pane label="盘点记录" name="check">盘点记录内容</el-tab-pane>
            <el-tab-pane label="调拨记录" name="transfer">调拨记录内容</el-tab-pane>
            <el-tab-pane label="进货记录" name="purchase">进货记录内容</el-tab-pane>
            <el-tab-pane label="销售记录" name="sale">销售记录内容</el-tab-pane>
            <el-tab-pane label="库存分布" name="distribution">库存分布内容</el-tab-pane>
            <el-tab-pane label="出入库统计" name="stat">出入库统计内容</el-tab-pane>
            <el-tab-pane label="操作记录" name="log">操作记录内容</el-tab-pane>
        </el-tabs>
    </div>

    <!-- 打印弹窗 -->
    <el-dialog title="打印货品信息" v-model="printDialogVisible" width="500px" class="print-dialog">
        <div>
            <div class="print-qr">
                <img src="https://picsum.photos/120/120?random=10" alt="二维码" />
                <div class="print-code">{{ form.goodsCode }}</div>
            </div>
            <el-table :data="printData" style="width: 100%;" border>
                <el-table-column prop="label" label="项目" width="120"></el-table-column>
                <el-table-column prop="value" label="内容"></el-table-column>
            </el-table>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button v-on:click="printDialogVisible = false">取消</el-button>
                <el-button type="primary" v-on:click="handlePrint">打印</el-button>
            </span>
        </template>
    </el-dialog>
</div>

<script>
    const { createApp, reactive, ref, onMounted, computed } = Vue;
    const {
        ElMessage, ElCarousel, ElCarouselItem, ElTabs, ElTabPane,
        ElDropdown, ElDropdownMenu, ElDropdownItem, ElDialog,
        ElTable, ElTableColumn, ElUpload, ElButton, ElInput,
        ElSwitch, ElForm, ElFormItem, ElTag, ElMessageBox
    } = ElementPlus;

    const app = createApp({
        setup() {
            // ---------- 基础信息 ----------
            const form = reactive({
                goodsId: '',
                goodsCode: '',
                goodsName: '',
                goodsTypeName: '',
                specification: '',
                supplierName: '',
                customerName: '',
                purchaseReferencePrice: '',
                salesReferencePrice: '',
                displayOrder: '',
                status: '0',
                shelfStatus: '0',
                shelfLife: '',
                shelfLifeType: '',
                warningDays: '',
                stockMin: '',
                stockMax: '',
                belowMin: '',
                aboveMax: '',
                goodsImagePath: 'https://picsum.photos/300/200?random=1',
                attachmentId: '',
                isDelete: '',
                createBy: '',
                createTime: '',
                updateBy: '',
                updateTime: '',
                remarks: ''
            });

            // 计算属性 - 保质期管理开关
            const shelfLifeManage = computed({
                get: () => form.shelfStatus === '1',
                set: (val) => form.shelfStatus = val ? '1' : '0'
            });

            // 计算属性 - 保质期单位
            const shelfLifeUnit = computed({
                get: () => form.shelfLifeType || '天',
                set: (val) => {
                    form.shelfLifeType = val;
                }
            });

            // 轮播图片
            const imgs = ref([]);

            // 总库存和总金额
            const totalStock = ref(0);
            const totalAmount = ref(0);

            // 加载状态
            const loading = ref(true);

            // 从URL获取货品ID（模拟场景，实际项目替换为真实逻辑）
            const getProductIdFromUrl = () => {
                const urlParams = new URLSearchParams(window.location.search);
                return urlParams.get('id'); // 模拟默认ID为10
            };
            // 获取货品详情
            const fetchProductDetails = async () => {
                try {
                    loading.value = true;
                    const productId = getProductIdFromUrl();
                    // 实际请求示例：
                     const response = await axios.post(`/BiProduct/Details?id=${productId}`);
                    const mockData = response.data.data[0];


                    // 填充表单数据
                    form.goodsId = mockData.goodsId;
                    form.goodsCode = mockData.goodsCode;
                    form.goodsName = mockData.goodsName;
                    form.goodsTypeName = mockData.goodsTypeName;
                    form.customerName = mockData.customerName;
                    form.supplierName = mockData.supplierName;
                    form.specification = mockData.specification;
                    form.purchaseReferencePrice = mockData.purchaseReferencePrice;
                    form.salesReferencePrice = mockData.salesReferencePrice;
                    form.displayOrder = mockData.displayOrder;
                    form.status = mockData.status;
                    form.shelfStatus = mockData.shelfStatus;
                    form.shelfLife = mockData.shelfLife;
                    form.shelfLifeType = mockData.shelfLifeType;
                    form.warningDays = mockData.warningDays;
                    form.stockMin = mockData.stockMin;
                    form.stockMax = mockData.stockMax;
                    form.belowMin = mockData.belowMin;
                    form.aboveMax = mockData.aboveMax;
                    form.goodsImagePath =  'https://picsum.photos/300/200?random=1';
                    form.attachmentId = mockData.attachmentId;
                    form.remarks = mockData.remarks;
                    form.createBy = mockData.createBy;
                    form.createTime = mockData.createTime;
                    form.updateBy = mockData.updateBy;
                    form.updateTime = mockData.updateTime;

                    // 处理图片轮播
                    imgs.value = [mockData.goodsImagePath, 'https://picsum.photos/300/200?random=2', 'https://picsum.photos/300/200?random=3'];
                    // 总库存
                    totalStock.value = mockData.currentStock;
                    // 库存总金额（简单计算：总库存 * 入库参考价）
                    totalAmount.value = (totalStock.value * form.purchaseReferencePrice).toFixed(2);

                    loading.value = false;
                    ElMessage.success('货品数据加载成功');
                } catch (error) {
                    console.error('获取货品详情失败:', error);
                    ElMessage.error('获取货品信息失败，请刷新页面重试');
                    loading.value = false;
                }
            };

            // 格式化日期
            const formatDate = (dateString) => {
                if (!dateString) return '未知';
                const date = new Date(dateString);
                return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}:${String(date.getSeconds()).padStart(2, '0')}`;
            };

            // ---------- 标签页激活状态 ----------
            const activeTab = ref('other');

            // ---------- 附件上传逻辑 ----------
            const fileList = ref([]);
            const uploadedFiles = ref([
                { name: '产品规格说明书.pdf' },
                { name: '质量检测报告.doc' },
                { name: '产品图片.zip' }
            ]);
            const hoverIndex = ref(-1);

            const handleUploadSuccess = (response, file) => {
                uploadedFiles.value.push({
                    name: file.name,
                    url: URL.createObjectURL(file.raw)
                });
                ElMessage.success(`文件 "${file.name}" 上传成功`);
            };

            const handleUploadError = (err, file) => {
                ElMessage.error(`文件 "${file.name}" 上传失败，请重试`);
            };

            const handleExceed = (files) => {
                ElMessage.warning(`最多只能上传10个文件`);
            };

            const removeFile = (index) => {
                uploadedFiles.value.splice(index, 1);
                ElMessage.info(`文件已删除`);
            };

            // ---------- 打印弹窗逻辑 ----------
            const printDialogVisible = ref(false);
            const printData = ref([]);

            const updatePrintData = () => {
                printData.value = [
                    { label: '货品名称', value: form.goodsName },
                    { label: '货品类型', value: form.goodsTypeName },
                    { label: '规格型号', value: form.specification },
                    { label: '供应商', value: form.supplierName },
                    { label: '客户', value: form.customerName },
                    { label: '入库参考价', value: `¥${form.purchaseReferencePrice}` },
                    { label: '出库参考价', value: `¥${form.salesReferencePrice}` },
                    { label: '当前库存', value: totalStock.value },
                    { label: '库存总金额', value: `¥${totalAmount.value}` }
                ];
            };

            const handlePrint = () => {
                ElMessage.info('执行打印操作（可结合实际打印逻辑扩展）');
                printDialogVisible.value = false;
            };

            // ---------- 操作按钮处理 ----------
            const handleEdit = () => {
                // window.location.href = `/BiProduct/Edit?id=${form.goodsId}`;
                ElMessage.info('编辑功能开发中...');
            };

            const handleDelete = async () => {
                try {
                    await ElMessageBox.confirm(
                        '确定要删除这个货品吗？此操作不可撤销。',
                        '确认删除',
                        {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning',
                        }
                    );

                    ElMessage.success('货品删除成功');
                    setTimeout(() => {
                         window.location.href = '/BiProduct/Index';
                        ElMessage.info('已跳转至货品列表页');
                    }, 1500);
                } catch (error) {
                    ElMessage.info('已取消删除操作');
                }
            };

            const handleToggleStatus = async () => {
                const newStatus = form.status === '0' ? '1' : '0'; // 计算新状态（0-正常，1-停用）
                const action = newStatus === '0' ? '启用' : '停用';

                try {
                    // 显示确认对话框
                    await ElMessageBox.confirm(
                        `确定要${action}这个货品吗？`,
                        `确认${action}`,
                        {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning',
                        }
                    );

                    // 发送状态修改请求到后端
                    await axios.post(`/BiProduct/Status?status=${newStatus}&id=${form.goodsId}`);

                    // 请求成功后更新前端状态
                    form.status = newStatus;
                    ElMessage.success(`货品${action}成功`);
                } catch (error) {
                    // 处理取消操作或请求失败
                    if (error === 'cancel') {
                        ElMessage.info(`已取消${action}操作`);
                    } else {
                        ElMessage.error(`货品${action}失败：${error.response?.data?.msg || '网络异常'}`);
                    }
                }
            };

            const handleCopy = () => {
                ElMessage.info('复制货品功能开发中...');
            };

            const handleExport = () => {
                ElMessage.info('导出货品信息功能开发中...');
            };

            // 组件挂载时获取数据
            onMounted(() => {
                fetchProductDetails();
                updatePrintData();
            });

            return {
                form,
                imgs,
                totalStock,
                totalAmount,
                loading,
                shelfLifeManage,
                shelfLifeUnit,
                activeTab,
                fileList,
                uploadedFiles,
                hoverIndex,
                handleUploadSuccess,
                handleUploadError,
                handleExceed,
                removeFile,
                printDialogVisible,
                printData,
                handlePrint,
                formatDate,
                handleEdit,
                handleDelete,
                handleToggleStatus,
                handleCopy,
                handleExport
            };
        }
    });

    // 注册Element Plus组件
    app.component('ElCarousel', ElCarousel);
    app.component('ElCarouselItem', ElCarouselItem);
    app.component('ElTabs', ElTabs);
    app.component('ElTabPane', ElTabPane);
    app.component('ElDropdown', ElDropdown);
    app.component('ElDropdownMenu', ElDropdownMenu);
    app.component('ElDropdownItem', ElDropdownItem);
    app.component('ElDialog', ElDialog);
    app.component('ElTable', ElTable);
    app.component('ElTableColumn', ElTableColumn);
    app.component('ElUpload', ElUpload);
    app.component('ElButton', ElButton);
    app.component('ElInput', ElInput);
    app.component('ElSwitch', ElSwitch);
    app.component('ElForm', ElForm);
    app.component('ElFormItem', ElFormItem);
    app.component('ElTag', ElTag);

    app.use(ElementPlus);
    app.mount('#app');
</script>
<style>
    :root {
        --primary-color: #409EFF;
        --success-color: #67C23A;
        --warning-color: #E6A23C;
        --danger-color: #F56C6C;
        --info-color: #909399;
        --bg-color: #f5f7fa;
        --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        --border-radius: 8px;
    }

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif;
        background-color: var(--bg-color);
        color: #333;
        line-height: 1.5;
    }

    #app {
        margin-top: 20px;
        padding: 0 20px;
        max-width: 1400px;
        margin-left: auto;
        margin-right: auto;
    }

    /* 基础信息容器 */
    .basic-info {
        background-color: #fff;
        box-shadow: var(--card-shadow);
        padding: 24px;
        margin-bottom: 20px;
        border-radius: var(--border-radius);
        transition: all 0.3s ease;
    }

    /* 标签页容器 */
    .tabs-container {
        background-color: #fff;
        box-shadow: var(--card-shadow);
        min-height: 400px;
        padding: 20px;
        border-radius: var(--border-radius);
    }

    .demo-tabs > .el-tabs__content {
        padding: 32px;
        color: #6b778c;
        font-size: 32px;
        font-weight: 600;
    }

    /* 附件项 hover 效果 */
    .file-item {
        transition: all 0.2s;
        border-radius: 4px;
        padding: 8px 12px;
    }

        .file-item:hover {
            background-color: #f0f9ff;
            transform: translateY(-1px);
        }

    /* 表格、表单通用样式 */
    .form-row {
        display: flex;
        flex-wrap: wrap;
        margin: 0 -10px;
    }

    .form-col {
        flex: 0 0 50%;
        padding: 0 10px;
        box-sizing: border-box;
    }

    .full-width {
        flex: 0 0 100%;
    }

    /* 图片轮播样式 */
    .carousel-container {
        width: 300px;
        border-radius: var(--border-radius);
        overflow: hidden;
        /*box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);*/
    }

    /* 价格提示栏 */
    .price-bar {
        background: linear-gradient(135deg, #e6f7ff 0%, #f0f9ff 100%);
        padding: 12px 16px;
        margin-bottom: 20px;
        border-radius: var(--border-radius);
        display: flex;
        gap: 30px;
        border-left: 4px solid var(--primary-color);
    }

    /* 统计信息卡片 */
    .stats-card {
        text-align: center;
        margin: 0 20px;
        padding: 20px 15px;
        border-radius: var(--border-radius);
        background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
        min-width: 150px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
        transition: all 0.3s ease;
    }

        .stats-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

    .stats-value {
        font-size: 24px;
        font-weight: bold;
        color: var(--primary-color);
        margin-bottom: 5px;
    }

    /* 加载状态 */
    .loading-container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 400px;
        flex-direction: column;
    }

    .loading-spinner {
        width: 60px;
        height: 60px;
        border: 4px solid #f3f3f3;
        border-top: 4px solid var(--primary-color);
        border-radius: 50%;
        animation: spin 1s linear infinite;
        margin-bottom: 20px;
    }

    v-on:keyframes spin {
        0%

    {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }

    }

    /* 标题样式 */
    .page-title {
        font-size: 22px;
        font-weight: 600;
        color: #1f2d3d;
        margin-bottom: 5px;
        display: flex;
        align-items: center;
    }

        .page-title::before {
            content: '';
            display: inline-block;
            width: 4px;
            height: 18px;
            background-color: var(--primary-color);
            margin-right: 10px;
            border-radius: 2px;
        }

    /* 按钮组样式 */
    .action-buttons {
        display: flex;
        gap: 10px;
    }

    /* 信息容器布局 */
    .info-container {
        display: flex;
        gap: 30px;
    }

    /* 创建/更新信息样式 */
    .meta-info {
        color: var(--info-color);
        font-size: 14px;
        margin-top: 20px;
        padding-top: 15px;
        border-top: 1px solid #eaeaea;
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
    }

    /* 表单项目样式 */
    .el-form-item {
        margin-bottom: 18px;
    }

    /* 标签页头部样式 */
    .el-tabs__header {
        margin-bottom: 20px;
    }

    /* 响应式设计 */
    v-on:media (max-width: 992px) {
        .info-container

    {
        flex-direction: column;
    }

    .carousel-container {
        width: 100%;
        margin-bottom: 20px;
    }

    }

    v-on:media (max-width: 768px) {
        .form-col

    {
        flex: 0 0 100%;
    }

    .stats-card {
        margin: 10px 0;
        flex: 1;
        min-width: 120px;
    }

    .price-bar {
        flex-direction: column;
        gap: 10px;
    }

    .action-buttons {
        flex-wrap: wrap;
    }

    .meta-info {
        flex-direction: column;
        gap: 10px;
    }

    }

    /* 打印弹窗样式 */
    .print-dialog .el-dialog__body {
        padding: 20px;
    }

    .print-qr {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 20px;
    }

        .print-qr img {
            width: 120px;
            height: 120px;
            margin-bottom: 10px;
        }

    .print-code {
        font-weight: bold;
        font-size: 16px;
        color: #333;
    }

    /* 标签样式 */
    .el-tag {
        font-weight: 500;
    }

    /* 上传区域样式 */
    .upload-area {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        padding: 20px;
        text-align: center;
        margin-bottom: 10px;
        transition: border-color 0.3s;
    }

        .upload-area:hover {
            border-color: var(--primary-color);
        }

    /* 附件列表样式 */
    .attachments-list {
        margin-top: 15px;
    }
</style>
